import React, { Component } from "react"
import { observer, inject } from "mobx-react"
import { Link, withRouter } from "react-router-dom"
import cssModules from "react-css-modules"
import { message, Checkbox } from "antd"
import { login, getCaptcha } from "util/api"
import loginUtil from "util/login"
import LoginComponents from "./components/Login"

import styles from "./style.less"
import md5 from "util/md5.min.js"

const { UserName, Password, Submit } = LoginComponents

@withRouter
@inject("LoginStore")
@observer
@cssModules(styles)
class LoginPage extends Component {
  constructor(props) {
    super(props)

    this.store = this.props.loginStore
    this.phoneRef = React.createRef()
  }

  // state = {
  //   autoLogin: true,
  // };
  //
  // changeAutoLogin = e => {
  //   this.setState({
  //     autoLogin: e.target.checked,
  //   });
  // };

  handleSubmit = async (err, values) => {
    if (!err) {
      const res = await login(values.username, values.password)
      if (res.result === 0) {
        message.success("登录成功")
        await this.props.history.push("/screen")
      } else {
        message.error(res.msg)
      }
    }
  }

  render() {
    return (
      // @TODO <DocumentTitle title={this.getPageTitle()}>
      <div styleName="container">
        <div styleName="content">
          <div styleName="top">
            <div styleName="header">
              <img
                styleName="logo"
                src={require("image/screen/login-logo.png")}
              />
              {/* <img
                styleName="logo-title"
                src={require("image/login_title.png")}
              /> */}
            </div>
          </div>
          <div styleName="login">
            <LoginComponents ref={this.phoneRef} onSubmit={this.handleSubmit}>
              <UserName
                name="username"
                className={styles["username"]}
                placeholder="请输入用户名"
                autoComplete="off"
                rules={[
                  {
                    required: true,
                    message: "输入用户名!",
                  },
                ]}
              />
              <Password
                name="password"
                className={styles["password"]}
                placeholder="请输入密码"
                autoComplete="off"
                rules={[
                  {
                    required: true,
                    message: "请输入密码!",
                  },
                ]}
              />
              <Submit
                type="primary"
                style={{ marginTop: "0 !import" }}
                className={styles["login-btn"]}
                htmlType="submit"
              >
                登录
              </Submit>
            </LoginComponents>
          </div>
        </div>
      </div>
    )
  }
}

export default LoginPage
